<template>
    <el-dialog v-model="dialogVisible" title="处理告警" width="600px" @closed="handleDialogClosed">
        <el-form :model="processForm" label-width="80px" ref="formRef">
            <el-form-item label="告警信息">
                <div class="alarm-detail">
                    <div class="detail-item">
                        <span class="label">告警名称：</span>
                        <span>{{ alarm?.title }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">告警位置：</span>
                        <span>{{ alarm?.location }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">告警类型：</span>
                        <span>{{ alarm?.type }}</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="处理说明" prop="description" :rules="[
                { required: true, message: '请输入处理说明', trigger: 'blur' }
            ]">
                <el-input v-model="processForm.description" type="textarea" rows="4" placeholder="请输入处理说明" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="submitProcess">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    alarm: {
        type: Object,
        default: () => null
    }
})

const emit = defineEmits(['update:visible', 'submit', 'cancel'])

// 本地状态管理
const dialogVisible = ref(props.visible)
const formRef = ref(null)

// 处理表单数据
const processForm = reactive({
    description: '',
})

// 监听外部visible变化
watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal
})

// 监听内部dialogVisible变化
watch(() => dialogVisible.value, (newVal) => {
    emit('update:visible', newVal)
})

// 处理对话框关闭
const handleDialogClosed = () => {
    resetForm()
}

// 重置表单
const resetForm = () => {
    processForm.description = ''
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

// 关闭对话框
const closeDialog = () => {
    dialogVisible.value = false
    emit('cancel')
}

// 提交处理
const submitProcess = async () => {
    if (!formRef.value) return

    await formRef.value.validate((valid) => {
        if (valid && props.alarm) {
            const processData = {
                alarmId: props.alarm.id,
                description: processForm.description,
            }
            emit('submit', processData)
            dialogVisible.value = false
        }
    })
}
</script>

<style scoped>
.alarm-detail {
    width: 100%;
    padding: 16px;
    background-color: var(--el-fill-color-lighter);
    border-radius: 4px;
}

.detail-item {
    margin-bottom: 8px;
    font-size: 14px;
}

.detail-item .label {
    color: var(--el-text-color-secondary);
    margin-right: 8px;
}

:deep(.el-upload-list) {
    margin-top: 8px;
}

:deep(.el-upload__tip) {
    margin-top: 8px;
    color: var(--el-text-color-secondary);
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
</style>